<template>
    <div ref="layoutGrid" class="b-layout">
        <Transition @after-leave="afterHide">
            <div v-if="show" class="b-layout-grid">
                <slot :index="instance.index" :totalWidth="instance.totalWidth"></slot>
            </div>
        </Transition>
    </div>
</template>
<script lang="ts" setup>
import { LayoutGrid } from "@b/model/base/layout";
import { computed, onMounted, useTemplateRef, ref, nextTick } from "vue";
interface props {
    instance: LayoutGrid;
}
const { instance } = defineProps<props>();
const emits = defineEmits(['pending', 'finish']);

const layoutGrid = useTemplateRef('layoutGrid');
const show = ref(false);
const gap = computed(() => instance.gap + 'px');
const col = computed(() => instance.col);
const row = computed(() => instance.row);
const areas = computed(() => instance.area);
const height = computed(() => instance.height);
const fontSize = computed(() => instance.fontSize);

const afterHide = () => {
    if (!layoutGrid.value) return;
    instance.setTotalWidth(layoutGrid.value.offsetWidth);
    show.value = true
    nextTick().then(() => {
        emits('finish');
    });
}

onMounted(() => {
    instance.setTotalWidth(layoutGrid.value?.offsetWidth || 0)
    show.value = true
})
</script>
<style scoped>
.b-layout {
    width: 100%;
    height: v-bind(height);
    font-size: v-bind(fontSize);
}

.b-layout-grid {
    display: grid;
    grid-template-areas: v-bind(areas);
    grid-gap: v-bind(gap);
    grid-template-columns: repeat(v-bind(col), 1fr);
    grid-template-rows: repeat(v-bind(row), 1fr);
    width: 100%;
    height: 100%;
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>